<template>
  <view class="favorites">
      <view class="classification">
          <view :class="detailshow==index?'active':''" 
		  v-for="(item,index) in showlist" :key="item.id" 
		  @click="tapclick(index)">{{item}}</view>
      </view>
      <view class="detaillist" v-if="detailshow==0">
        <view v-if="homelist.length > 0">
          <view class="ser_detail" v-for="(item,index) in homelist" :key="index">
            <view class="detail_top">
              <view class="detail_left">
                <view class="left_one">{{item.startcountry}} {{""}} {{item.startcity}}——{{item.endcountry}} {{""}} {{item.endcity}}</view>
                <view class="left_two">{{item.startcitypinyin}}——{{item.endcitypinyin}}</view>
                <view class="left_three">{{item.SupllierName}}</view>
                <view class="left_four">运输时间 |  {{""}}<text> {{item.workday}}天</text></view>
              </view>
              <view class="detail_right">
                <view class="right_one">
                  <view>
                    <image v-if="item.solutiondetail[0].stn_servicecode=='TCFW' " src="@/static/images/trade/traffic1.png"></image>
                    <image v-if="item.solutiondetail[0].stn_servicecode=='SLYS' " src="@/static/images/trade/traffic2.png"></image>
                    <image v-if="item.solutiondetail[0].stn_servicecode=='TLYS'" src="@/static/images/trade/traffic3.png"></image>
                  </view>
                  <view v-if="item.solutiondetail.length>=2">
                    <image v-if="item.solutiondetail[1].stn_servicecode=='TCFW' " src="@/static/images/trade/traffic1.png"></image>
                    <image v-if="item.solutiondetail[1].stn_servicecode=='SLYS' " src="@/static/images/trade/traffic2.png"></image>
                    <image v-if="item.solutiondetail[1].stn_servicecode=='TLYS'" src="@/static/images/trade/traffic3.png"></image>
                  </view>
                  <view v-if="item.solutiondetail.length>=3"> 
                      <image v-if="item.solutiondetail[2].stn_servicecode=='TCFW' " src="@/static/images/trade/traffic1.png"></image>
                    <image v-if="item.solutiondetail[2].stn_servicecode=='SLYS' " src="@/static/images/trade/traffic2.png"></image>
                    <image v-if="item.solutiondetail[2].stn_servicecode=='TLYS'" src="@/static/images/trade/traffic3.png"></image>
                  </view>
                </view>
                <view class="right_list">
                  <!-- <view class="right_two" @click="qx(item)">取消</view> -->
                  <view
                    class="right_two"
                    style="background: #FF9900;"
                    @click="quitsc(item)">取消收藏</view>
                  <view class="right_two" @click="submit(item)">下单</view>
                </view>
                
              </view>
            </view>
            <view class="detail_bottom">
              <view class="bottom_left">
                <view class="left-content">
                  <view class="content-title">20GP</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_20GPCOCCNY == 0) && (item.totalpricedetail.STN_20GPCOCUSD == 0)">/
                  </view>
                  <view class="content-every" v-if="(item.totalpricedetail.STN_20GPCOCCNY !== 0)">{{ 'CNY ' +
                      item.totalpricedetail.STN_20GPCOCCNY
                  }}</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_20GPCOCCNY !== 0) && (item.totalpricedetail.STN_20GPCOCUSD !== 0)">+
                  </view>
                  <view class="content-every" v-if="item.totalpricedetail.STN_20GPCOCUSD !== 0">{{ 'USD ' +
                      item.totalpricedetail.STN_20GPCOCUSD
                  }}</view>
                </view>
                <view class="left-content">
                  <view class="content-title">40GP</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40GPCOCCNY == 0) && (item.totalpricedetail.STN_40GPCOCUSD == 0)">/
                  </view>
                  <view class="content-every" v-if="(item.totalpricedetail.STN_40GPCOCCNY !== 0)">{{ 'CNY ' +
                      item.totalpricedetail.STN_40GPCOCCNY
                  }}</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40GPCOCCNY !== 0) && (item.totalpricedetail.STN_40GPCOCUSD !== 0)">+
                  </view>
                  <view class="content-every" v-if="item.totalpricedetail.STN_40GPCOCUSD !== 0">{{ 'USD ' +
                      item.totalpricedetail.STN_40GPCOCUSD
                  }}</view>
                </view>
                <view class="left-content">
                  <view class="content-title">40HQ</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40HQCOCCNY == 0) && (item.totalpricedetail.STN_40HQCOCUSD == 0)">/
                  </view>
                  <view class="content-every" v-if="(item.totalpricedetail.STN_40HQCOCCNY !== 0)">{{ 'CNY ' +
                      item.totalpricedetail.STN_40HQCOCCNY
                  }}</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40HQCOCCNY !== 0) && (item.totalpricedetail.STN_40HQCOCUSD !== 0)">+
                  </view>
                  <view class="content-every" v-if="item.totalpricedetail.STN_40HQCOCUSD !== 0">{{ 'USD ' +
                      item.totalpricedetail.STN_40HQCOCUSD
                  }}</view>
                </view>
              </view>
              <view class="bottom_right" @click="lookdetail(item)">查看详情</view>
            </view>
          </view>
        </view>
        <view class="empty-class" v-else>
          <image src="@/static/images/user/empty.png" alt="">
        </view>
      </view>
      <view class="detaillist" v-if="detailshow==1">
        <view v-if="homelist.length > 0">
          <view class="ser_detail" v-for="(item,index) in homelist" :key="index">
            <view class="detail_top">
              <view class="detail_left">
                <view class="left_one">{{item.startcountry}} {{""}} {{item.startcity}}——{{item.endcountry}} {{""}} {{item.endcity}}</view>
                <view class="left_two">{{item.startcitypinyin}}——{{item.endcitypinyin}}</view>
                <view class="left_three">{{item.SupllierName}}</view>
                <view class="left_four">运输时间 |  {{""}}<text> {{item.workday}}天</text></view>
              </view>
              <view class="detail_right">
                <view class="right_one">
                  <view>
                    <image v-if="item.solutiondetail[0].stn_servicecode=='TCFW' " src="@/static/images/trade/traffic1.png"></image>
                    <image v-if="item.solutiondetail[0].stn_servicecode=='SLYS' " src="@/static/images/trade/traffic2.png"></image>
                    <image v-if="item.solutiondetail[0].stn_servicecode=='TLYS'" src="@/static/images/trade/traffic3.png"></image>
                  </view>
                  <view v-if="item.solutiondetail.length>=2">
                    <image v-if="item.solutiondetail[1].stn_servicecode=='TCFW' " src="@/static/images/trade/traffic1.png"></image>
                    <image v-if="item.solutiondetail[1].stn_servicecode=='SLYS' " src="@/static/images/trade/traffic2.png"></image>
                    <image v-if="item.solutiondetail[1].stn_servicecode=='TLYS'" src="@/static/images/trade/traffic3.png"></image>
                  </view>
                  <view v-if="item.solutiondetail.length>=3"> 
                      <image v-if="item.solutiondetail[2].stn_servicecode=='TCFW' " src="@/static/images/trade/traffic1.png"></image>
                    <image v-if="item.solutiondetail[2].stn_servicecode=='SLYS' " src="@/static/images/trade/traffic2.png"></image>
                    <image v-if="item.solutiondetail[2].stn_servicecode=='TLYS'" src="@/static/images/trade/traffic3.png"></image>
                  </view>
                </view>
                <view class="right_list">
                  <!-- <view class="right_two" @click="qx(item)">取消</view> -->
                  <view
                    class="right_two"
                    style="background: #FF9900;"
                    @click="quitsc(item)">取消收藏</view>
                  <view class="right_two" @click="submit(item)">下单</view>
                </view>
              </view>
            </view>
            <view class="detail_bottom">
              <view class="bottom_left">
                <view class="left-content">
                  <view class="content-title">20GP</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_20GPCOCCNY == 0) && (item.totalpricedetail.STN_20GPCOCUSD == 0)">/
                  </view>
                  <view class="content-every" v-if="(item.totalpricedetail.STN_20GPCOCCNY !== 0)">{{ 'CNY ' +
                      item.totalpricedetail.STN_20GPCOCCNY
                  }}</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_20GPCOCCNY !== 0) && (item.totalpricedetail.STN_20GPCOCUSD !== 0)">+
                  </view>
                  <view class="content-every" v-if="item.totalpricedetail.STN_20GPCOCUSD !== 0">{{ 'USD ' +
                      item.totalpricedetail.STN_20GPCOCUSD
                  }}</view>
                </view>
                <view class="left-content">
                  <view class="content-title">40GP</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40GPCOCCNY == 0) && (item.totalpricedetail.STN_40GPCOCUSD == 0)">/
                  </view>
                  <view class="content-every" v-if="(item.totalpricedetail.STN_40GPCOCCNY !== 0)">{{ 'CNY ' +
                      item.totalpricedetail.STN_40GPCOCCNY
                  }}</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40GPCOCCNY !== 0) && (item.totalpricedetail.STN_40GPCOCUSD !== 0)">+
                  </view>
                  <view class="content-every" v-if="item.totalpricedetail.STN_40GPCOCUSD !== 0">{{ 'USD ' +
                      item.totalpricedetail.STN_40GPCOCUSD
                  }}</view>
                </view>
                <view class="left-content">
                  <view class="content-title">40HQ</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40HQCOCCNY == 0) && (item.totalpricedetail.STN_40HQCOCUSD == 0)">/
                  </view>
                  <view class="content-every" v-if="(item.totalpricedetail.STN_40HQCOCCNY !== 0)">{{ 'CNY ' +
                      item.totalpricedetail.STN_40HQCOCCNY
                  }}</view>
                  <view class="content-every"
                    v-if="(item.totalpricedetail.STN_40HQCOCCNY !== 0) && (item.totalpricedetail.STN_40HQCOCUSD !== 0)">+
                  </view>
                  <view class="content-every" v-if="item.totalpricedetail.STN_40HQCOCUSD !== 0">{{ 'USD ' +
                      item.totalpricedetail.STN_40HQCOCUSD
                  }}</view>
                </view>
              </view>
              <view class="bottom_right" @click="lookdetail(item)">查看详情</view>
            </view>
          </view>
        </view>
        <view class="empty-class" v-else>
          <image src="@/static/images/user/empty.png" alt="">
        </view>
      </view>
    <!-- 详情弹窗 -->
	<view v-if="show">
		<u-popup :show="show" mode="center" closeable :round="20" @close="closes" >
			<view class="pop">	
			<view class="popdetail">线路详情</view>
			<view class="route" v-if="solutiondetail.length == 1">
			  <view class="route_one">
				<view class="route_qd">始</view>
				<view class="route_x">{{ solutiondetail[0].stn_startaddress }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_s" v-if="solutiondetail[0].stn_servicecode == 'SLYS'">
				  <image src="@/static/images/trade/traffic2.png"></image>
				</view>

				<view class="route_qd_s" v-else>
				  <image src="@/static/images/trade/traffic3.png"></image>
				</view>

				<view class="route_x" v-if="solutiondetail[0].stn_spl_uuid">
				  {{ solutiondetail[0].stn_spl_uuid }}
				</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd">终</view>
				<view class="route_x">{{ solutiondetail[solutiondetail.length - 1].stn_endport }}</view>
			  </view>
			</view>
			<view class="route" v-else-if="solutiondetail.length == 2">
			  <view class="route_one">
				<view class="route_qd">始</view>
				<view class="route_x">{{ solutiondetail[0].stn_startaddress }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_s" v-if="solutiondetail[0].stn_servicecode == 'SLYS'">
				  <image src="@/static/images/trade/traffic2.png"></image>
				</view>
				<view class="route_qd_s" v-else>
				  <image src="@/static/images/trade/traffic3.png"></image>
				</view>
				<view class="route_x" v-if="solutiondetail[0].stn_spl_uuid">{{ solutiondetail[0].stn_spl_uuid }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_z">转</view>
				<view class="route_x">{{ solutiondetail[0].stn_destination }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_s" v-if="solutiondetail[solutiondetail.length - 1].stn_servicecode == 'SLYS'">
				  <image src="@/static/images/trade/traffic2.png"></image>
				</view>
				<view class="route_qd_s" v-else>
				  <image src="@/static/images/trade/traffic3.png"></image>
				</view>
				<view class="route_x" v-if="solutiondetail[0].stn_spl_uuid">
				  {{ solutiondetail[solutiondetail.length - 1].stn_spl_uuid }}</view>
			  </view>
			  <view class="line_two"></view>
			  <view class="line_two"></view>
			  <view class="route_one">
				<view class="route_qd">终</view>
				<view class="route_x">{{ solutiondetail[solutiondetail.length - 1].stn_endport }}</view>
			  </view>
			</view>
			<view class="route" v-else>
			  <view class="route_one">
				<view class="route_qd">始</view>
				<view class="route_x route_qd_x">{{ solutiondetail[0].stn_startaddress }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_s" v-if="solutiondetail[0].stn_servicecode == 'SLYS'">
				  <image src="@/static/images/trade/traffic2.png"></image>
				</view>
				<view class="route_qd_s" v-else>
				  <image src="@/static/images/trade/traffic3.png"></image>
				</view>
				<view class="route_x">{{ solutiondetail[0].stn_spl_uuid }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_z">转</view>
				<view class="route_x">{{ solutiondetail[0].stn_destination }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_s" v-if="solutiondetail[1].stn_servicecode == 'SLYS'">
				  <image src="@/static/images/trade/traffic2.png"></image>
				</view>
				<view class="route_qd_s" v-else>
				  <image src="@/static/images/trade/traffic3.png"></image>
				</view>
				<view class="route_x">{{ solutiondetail[1].stn_spl_uuid }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_z">转</view>
				<view class="route_x">{{ solutiondetail[1].stn_destination }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="route_one">
				<view class="route_qd_s" v-if="solutiondetail[2].stn_servicecode == 'SLYS'">
				  <image src="@/static/images/trade/traffic2.png"></image>
				</view>
				<view class="route_qd_s" v-else>
				  <image src="@/static/images/trade/traffic3.png"></image>
				</view>
				<view class="route_x">{{ solutiondetail[2].stn_spl_uuid }}</view>
			  </view>
			  <view class="line"></view>
			  <view class="line_one"></view>
			  <view class="route_one">
				<view class="route_qd">终</view>
				<view class="route_x">{{ solutiondetail[2].stn_destination }}</view>
			  </view>
			</view>
			</view>
		</u-popup>
	</view>
  </view>
</template>

<script>
import { getfavorites,postfavorites } from "@/request/interface/logistics.js";
import { hasPermission, getItem } from "@/utils/storage.js"; // //引入混入的文件
export default {
  data(){
    return {
      showlist:['直航优先','联运优先'],
      detailshow:0,
      homelist:[],
      type: '直航优先',
      boxshow:false,
      boxshow1:false,
      show:false,
      solutiondetail:{}
    }
  },
  created() {
    hasPermission(); //路由鉴权
  },
  onLoad(){
    this.getfavorites()
  },
  methods:{
    tapclick(index){
      this.detailshow = index
      this.homelist = []
      this.type = this.showlist[index]
      this.getfavorites()
    },
    async getfavorites(){
      const data = await getfavorites({ 
        uuid:getItem('userdata').UUID,
        type: this.type
      })
      if(data.state == 0){
        this.homelist = data.data
      } else{
        uni.showToast({
            title:data.message,
            icon: "none"
        });
      }
    },
    lookdetail(item){
      this.solutiondetail=item.solutiondetail
      this.show = true
    },
    close() {
      this.boxshow = false
    },
    close1() {
      this.boxshow1 = false
    },
    closes(){
      this.show=false
    },
    // 去往下单页
     // 去往下单页
    submit(item){
	  let data = JSON.stringify({
	    ...item
	  })
	  uni.navigateTo({
	    url: '/pages/logistics/place?data=' + data 
	  })
    },
    // 取消收藏
    async quitsc(item){
      const data = await postfavorites({
        useruuid: getItem('userdata').UUID,
        prouuid: item.uuid,
        type:'Q'
      })
      if(data.state==0){
        uni.showToast({
            title:'取消收藏成功',
            icon: "none"
        });
        this.getfavorites()
      }else{
        uni.showToast({
            title:data.message,
            icon: "none"
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.favorites {
  .classification {
    display: flex;
    margin-top: 34rpx;
    background: #f8f8f8;
    view {
        flex: 1;
        text-align: center;
        line-height: 80rpx;
        font-size: 26rpx;
        color: #666666;
    }
    .active{
      color: #51a1ff;
    }
  }
  .detaillist {
        margin-top: 28rpx;
        .ser_detail {
          width: 670rpx;
          // height: 278rpx;
          background: #f2f8ff;
          padding:20rpx 40rpx 20rpx 40rpx ;
          margin-bottom: 20rpx;
          .detail_top {
            display: flex;
            justify-content: space-between;
            .detail_left {
              .left_one {
                font-size: 24rpx;
                color: #000000;
              }
              .left_two {
                font-size: 20rpx;
                color: #000000;

              }
              .left_three {
                font-size: 24rpx;
                color: #51a1ff;
              }
              .left_four {
                font-size: 24rpx;
                color: #999999;
                text {
                  color: #51a1ff;
                }
              }
            }
            .detail_right {
              .right_one {

              display: flex;
              justify-content:flex-end;
              image {
                width: 32rpx;
                height: 32rpx;
                margin-left: 18rpx;

              }
            }
            .right_two {
              width: 100rpx;
              height: 48rpx;
              background: #3478f3;
              border-radius: 10rpx;
              box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(81,161,255,0.30); 
              font-size: 24rpx;
              font-weight: 400;
              text-align: center;
              color: #ffffff;
              text-align: center;
              line-height: 48rpx;
              margin-top: 38rpx;
              margin-left: 20rpx;
            }
            }
            .right_list {
              display: flex;
            }
            
          }
          .detail_bottom {
            margin-top: 4rpx;
            display: flex;
            justify-content: space-between;
            .bottom_left {
              display: flex;
              justify-content: space-between;
              .left-content {
                text-align: left;
                font-size: 23rpx;
                color: #aaaaaa;
                .content-title {
                  width: 120rpx;
                  margin-right: 24rpx;
                }
                .content-every {
                  text-align: left;
                  font-size: 24rpx;
                  color: #ff0000;
                }
              }
            }
            .bottom_right {
              font-size: 24rpx;
              font-weight: 400;
              color: #3478f3;
              margin-top: 34rpx;
              text-align: right;
            }
          }
        }
        .empty-class {
          width: 600rpx;
          margin: 0rpx auto;
          text-align: center;
          image {
            width: 520rpx;
            height: 610rpx;
          }
        }
  }
  .pop {
    width: 670rpx;
    // height: 330rpx;
    background: #ffffff;
    border: 2rpx solid #707070;
    border-radius: 40rpx;
    padding-right: 40rpx;

    .popdetail {
      font-size: 26rpx;
      color: #666666;
      margin-left: 40rpx;
      margin-top: 33rpx;
    }

    .route {
      display: flex;
      margin-top: 40rpx;
      margin-left: 40rpx;
      flex-wrap: wrap;

      .route_one {
        margin-bottom: 40rpx;

        .route_qd {
          width: 40rpx;
          height: 40rpx;
          background: #3487f3;
          border-radius: 50%;
          color: #ffffff;
          font-size: 20rpx;
          text-align: center;
          line-height: 40rpx;
          margin: 0 auto;
        }

        .route_qd_z {
          width: 40rpx;
          height: 40rpx;
          border: 2rpx solid #3487f3;
          border-radius: 50%;
          color: #3487f3;
          text-align: center;
          line-height: 40rpx;
          font-size: 20rpx;
          margin: 0 auto;
        }

        .route_qd_s {
          text-align: center;

          image {
            width: 50rpx;
            height: 40rpx;
            margin-left: 15rpx;
          }
        }

        .route_x {
          color: #333333;
          font-size: 20rpx;
          margin-top: 8rpx;
          min-width: 60rpx;
          max-width: 110rpx;
          text-align: center;
        }
      }

      .line {
        width: 106rpx;
        height: 0rpx;
        border-bottom: 2rpx dashed #cccccc;
        margin-top: 18rpx;
      }

      .line_two {
        width: 53rpx;
        height: 0rpx;
        border-bottom: 2rpx dashed #cccccc;
        margin-top: 18rpx;
      }
    }
  }
}
::v-deep .u-safe-bottom {
  padding: 0;
}
</style>